<!--
 * @Description: 
 * @Autor: Ming
 * @LastEditors: Ming
 * @LastEditTime: 2021-11-18 13:47:45
-->
<template>
  <div class="navbar">
    <div class="logo"></div>
    <div class="menu">
      <div class="menuitem"
           v-for="(item, index) in menu"
           :key="index">{{item.title}}</div>
    </div>
    <div class="avatar"></div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
  setup () {
    const data = reactive({
      menu: [{ title: '主页', path: '/' }]
    })

    return { ...toRefs(data) }
  },
}
</script>

<style lang="scss">
.navbar {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
</style>